<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>主页</title>
		<link rel="stylesheet" href="head.css">
		<style>
			.category-container {
				max-width: 1200px;
				margin: 0 auto;
				padding: 30px 20px;
			}

			.category-section {
				margin-bottom: 50px;
			}

			.section-header {
				text-align: center;
				margin-bottom: 30px;
				position: relative;
			}

			.section-title {
				font-size: 32px;
				color: #8e0e00;
				margin-bottom: 15px;
				text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
			}

			.section-divider {
				height: 4px;
				background: linear-gradient(to right, #8e0e00, #a52a2a);
				width: 200px;
				margin: 0 auto;
				border-radius: 2px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			.section-description {
				font-size: 18px;
				color: #555;
				max-width: 800px;
				margin: 20px auto 0;
				line-height: 1.6;
			}

			.category-links {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 30px;
				margin-top: 30px;
			}

			.category-link {
				text-decoration: none;
			}

			.feature-card {
				background: #fff;
				border-radius: 12px;
				overflow: hidden;
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
				transition: all 0.3s ease;
				width: 250px;
				height: 180px;
				display: flex;
				flex-direction: column;
				position: relative;
			}

			.feature-card:hover {
				transform: translateY(-10px);
				box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
			}

			.feature-card .card-content {
				padding: 25px 20px;
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.feature-card .card-title {
				font-size: 20px;
				color: #8e0e00;
				text-align: center;
				margin-bottom: 15px;
				font-weight: 600;
			}

			.feature-card .btn-primary {
				display: inline-block;
				background: linear-gradient(to right, #8e0e00, #a52a2a);
				color: white;
				padding: 10px 25px;
				border-radius: 8px;
				text-decoration: none;
				font-weight: 600;
				transition: all 0.3s ease;
				border: none;
				cursor: pointer;
				text-align: center;
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
				margin-top: 10px;
			}

			.feature-card .btn-primary:hover {
				transform: translateY(-2px);
				box-shadow: 0 7px 14px rgba(0, 0, 0, 0.15);
				background: linear-gradient(to right, #a52a2a, #8e0e00);
			}

			/* 响应式设计 */
			@media (max-width: 768px) {
				.section-title {
					font-size: 28px;
				}

				.category-links {
					gap: 20px;
				}

				.feature-card {
					width: 100%;
					max-width: 300px;
				}
			}

			@media (max-width: 480px) {
				.section-title {
					font-size: 24px;
				}

				.section-divider {
					width: 150px;
				}
			}
		</style>
	</head>
	<body>
		<section class="hero-section">
			<h1 class="hero-title">三国杀模拟器主页</h1>
			<h2 class="hero-title">V7.8.3.62</h2>
			<h3 class="hero-title">请尽量使用Windows系统以获得最优的体验效果</h3>
			<h3 class="hero-title">gitcode已终止更新于V7.8.3.62</h3>
			<div class="nav-buttons">
				<button class="nav-button"><a href="indexjd.html">切换到经典版</a></button>
			</div>
		</section>

		<div class="category-container">
			<div class="category-section">
				<div class="section-header">
					<h2 class="section-title">模拟器类（核心功能）</h2>
					<div class="section-divider"></div>
				</div>

				<div class="category-links">
					<a href="jushou.html" class="category-link" target="_blank">
						<div class="feature-card">
							<div class="card-content">
								<h3 class="card-title">沮爹模拟器（纯随机版）</h3>
								<span class="btn-primary">开始模拟</span>
							</div>
						</div>
					</a>

					<a href="jushouhlq.html" class="category-link" target="_blank">
						<div class="feature-card">
							<div class="card-content">
								<h3 class="card-title">沮爹模拟器（红利期版）</h3>
								<span class="btn-primary">开始模拟</span>
							</div>
						</div>
					</a>

					<a href="OSjushou.html" class="category-link" target="_blank">
						<div class="feature-card">
							<div class="card-content">
								<h3 class="card-title">沮爹模拟器开源教学</h3>
								<span class="btn-primary">查看内容</span>
							</div>
						</div>
					</a>

					<a href="dabao.html" class="category-link" target="_blank">
						<div class="feature-card">
							<div class="card-content">
								<h3 class="card-title">大宝模拟器</h3>
								<span class="btn-primary">开始模拟</span>
							</div>
						</div>
					</a>

					<a href="simulatorno.html" class="category-link" target="_blank">
						<div class="feature-card">
							<div class="card-content">
								<h3 class="card-title">模拟器（无技能版）</h3>
								<span class="btn-primary">开始模拟</span>
							</div>
						</div>
					</a>

					<a href="stand alone js.html" class="category-link" target="_blank">
						<div class="feature-card">
							<div class="card-content">
								<h3 class="card-title">模拟器（单机版）</h3>
								<span class="btn-primary">开始模拟</span>
							</div>
						</div>
					</a>

					<a href="code-display.html" class="category-link" target="_blank">
						<div class="feature-card">
							<div class="card-content">
								<h3 class="card-title">模拟器（单机版复制）</h3>
								<span class="btn-primary">开始模拟</span>
							</div>
						</div>
					</a>
				</div>
			</div>

			<div class="category-section">
				<div class="section-header">
					<h2 class="section-title">工具类（辅助功能）</h2>
					<div class="section-divider"></div>
				</div>

				<div class="category-links">
					<a href="xbj.html" class="category-link" target="_blank">
						<div class="feature-card">
							<div class="card-content">
								<h3 class="card-title">面杀小标记</h3>
								<span class="btn-primary">查看内容</span>
							</div>
						</div>
					</a>

					<a href="suiji.html" class="category-link" target="_blank">
						<div class="feature-card">
							<div class="card-content">
								<h3 class="card-title">面杀随机标记</h3>
								<span class="btn-primary">查看内容</span>
							</div>
						</div>
					</a>
					
					<div class="category-links">
						<a href="zgl.html" class="category-link" target="_blank">
							<div class="feature-card">
								<div class="card-content">
									<h3 class="card-title">友诸葛亮标记</h3>
									<span class="btn-primary">查看内容</span>
								</div>
							</div>
						</a>

						<a href="code comparison js.html" class="category-link" target="_blank">
							<div class="feature-card">
								<div class="card-content">
									<h3 class="card-title">洗牌代码对比</h3>
									<span class="btn-primary">查看内容</span>
								</div>
							</div>
						</a>

						<a href="deck.html" class="category-link" target="_blank">
							<div class="feature-card">
								<div class="card-content">
									<h3 class="card-title">自定义牌堆编辑器</h3>
									<span class="btn-primary">查看内容</span>
								</div>
							</div>
						</a>

						<a href="https://github.com/1145141919810TONNY/sgsmoniqi/archive/refs/heads/main.zip"
							class="category-link" target="_blank">
							<div class="feature-card">
								<div class="card-content">
									<h3 class="card-title">下载完整ZIP</h3>
									<span class="btn-primary">立即下载</span>
								</div>
							</div>
						</a>
					</div>
				</div>

				<div class="category-section">
					<div class="section-header">
						<h2 class="section-title">项目信息类</h2>
						<div class="section-divider"></div>
					</div>

					<div class="category-links">
						<a href="versionjs.html" class="category-link" target="_blank">
							<div class="feature-card">
								<div class="card-content">
									<h3 class="card-title">更新日志</h3>
									<span class="btn-primary">查看更新</span>
								</div>
							</div>
						</a>
						<a href="MIT LICENSE.html" class="category-link" target="_blank">
							<div class="feature-card">
								<div class="card-content">
									<h3 class="card-title">MIT协议</h3>
									<span class="btn-primary">查看内容</span>
								</div>
							</div>
						</a>
						<a href="zz.html" class="category-link" target="_blank">
							<div class="feature-card">
								<div class="card-content">
									<h3 class="card-title">作者页面</h3>
									<span class="btn-primary">查看内容</span>
								</div>
							</div>
						</a>
						<a href="bug.html" class="category-link" target="_blank">
							<div class="feature-card">
								<div class="card-content">
									<h3 class="card-title">问题反馈</h3>
									<span class="btn-primary">查看内容</span>
								</div>
							</div>
						</a>
					</div>
				</div>

				<div class="update-highlight">
					<h3 class="update-title">最新版本更新内容 V7.8.3.62</h3>
					<div class="update-content">
						<ul class="version-list">
							<li>1.将版本更新信息页面的展示优化：除了最新版本信息外，其余将会按照大版本分类折叠，这将大幅减少本页面的长度</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<button id="backToTopBtn">回到顶部</button>

		<footer class="site-footer">
			<div class="author-info">
				<p>
					作者： <a href="https://space.bilibili.com/87412647?spm_id_from=333.1007.0.0"
						target="_blank">bilibili月が綺麗ですね_</a><br />
					联系方式：<a href="mailto:3099637681@qq.com" target="_blank">3099637681@qq.com（QQ同号）</a><br />
					有什么新功能或建议欢迎骚扰（著名来意）<br />
					<a href="https://1145141919810tonny.github.io/sgsmoniqi/" target="_blank">点击此处使用GitHub Pages在线服务</a>
				</p>
			</div>
			<div class="code-update">
				<a href="https://www.bilibili.com/read/readlist/rl929858?spm_id_from=333.1387.0.0" target="_blank"
					class="bili-btn" rel="noopener noreferrer">
					[bilibili]获取更新动态
				</a>
				<a href="https://github.com/1145141919810TONNY/sgsmoniqi/" target="_blank" class="github-btn"
					rel="noopener noreferrer">
					[GitHub]获取后续代码更新
				</a>
				<a href="https://gitcode.com/TONNY114514/sgsmnq?source_module=search_project" target="_blank"
					class="gitcode-btn" rel="noopener noreferrer">
					[GitCode]获取后续代码更新(国内git)
				</a>
			</div>
			<div class="license-notice">
				<p>
					Copyright &copy; <span id="copyright-year">2025</span> bilibili 月が綺麗ですね_<br />
					Released under the
					<a href="MIT LICENSE.html" title="查看MIT许可证" class="license-link" target="_blank">
						MIT License
					</a>
				</p>
				<p class="i18n-annotation">
					(法律条款以英文版<a href="MIT LICENSE.html" target="_blank">LICENSE</a>文件为准)
				</p>
			</div>
		</footer>

		<script>
			// 设置版权年份
			document.getElementById('copyright-year').textContent = new Date().getFullYear();

			// 回到顶部功能
			const backToTopBtn = document.getElementById('backToTopBtn');

			window.addEventListener('scroll', () => {
				if (window.scrollY > 300) {
					backToTopBtn.style.display = 'block';
				} else {
					backToTopBtn.style.display = 'none';
				}
			});

			backToTopBtn.addEventListener('click', () => {
				window.scrollTo({
					top: 0,
					behavior: 'smooth'
				});
			});
		</script>
	</body>
</html>